import React, { Component } from 'react';
import {
    AppRegistry,
    Image,
    PixelRatio,
    ScrollView,
    Text,
    View,
    Button,
    TouchableOpacity,
    ToastAndroid
} from 'react-native';
import Picker from 'react-native-picker';

import Head from './layout/Head';
import styles from '../../assets/css/style.js';
import GlobalConfig from '../util/Global';
import CoverTestUtils from '../util/CoverTestUtils';
const rem = GlobalConfig.WIDTH/7.5;
const her = (GlobalConfig.HEIGHT-1.92*rem);


/**
 * 状态查看
 */
export default class CoverTest extends Component {
    constructor(props){
        super(props);
        this.state={
            roomType:"请选择房型",
            isPickerShow: false,
        }
    }

    /**
     * picker显示/隐藏
     */
    togglePicker() {
        let data = [
            ['一室', '两室', '三室', '四室'],
            ['一厅', '两厅', '三厅', '四厅']];

        Picker.init({
            pickerConfirmBtnText: '确定',
            pickerCancelBtnText: '取消',
            pickerTitleText: '请选择房型',
            pickerData: data,
            selectedValue: [1,5],
            onPickerConfirm: (data) => {
                this.setState({roomType: data})
            },
            onPickerCancel: (data) => {
                console.log(data);
            },
            onPickerSelect: (data) => {
                console.log(data);
            }
        });
        
        if (this.state.isPickerShow) {
            Picker.hide();
        } else {
            Picker.show();
        }
       this.setState({isPickerShow: !this.state.isPickerShow});
    }


    render() {
        const {navigate} = this.props.navigation;
        const lists=[["首 页", "icon_in", GlobalConfig.LOGIN_VIEW], 
                     ["状态查看", "icon_ck", GlobalConfig.STATUS_CHECK_VIEW], 
                     ["设 置", "icon_sz", GlobalConfig.SETTING_VIEW]];
        return (
            <View style={[styles.flex,styles.bgcolor]}>
                <Head title="测试功能" list={lists} navigate={navigate}> </Head>
                <View style={styles.flex}>
                    <ScrollView style={styles.ztScroll}>
                        <View style={styles.Iptop}>
                            <View style={styles.IpPick}>
                                <Text style={styles.PickText} onPress={this.togglePicker.bind(this)}>{this.state.roomType}</Text>
                            </View>
                        </View>
                        <View style={[styles.center,{height:her}]}>
                            <View style={styles.Ipwrap}>
                                
                                <Image
                                    style={styles.Ip_Bgimg}
                                    resizeMode="contain"
                                    source={require('../../assets/img/bg_Ipt.png')}
                                />

                                <TouchableOpacity activeOpacity={1} onPress={() => CoverTestUtils.importImage(navigate, this.state.roomType)}>
                                    <View style={styles.Ipbut}>
                                        <Text style={styles.IpFont}>导入房型图</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </ScrollView>
                </View>
            </View>
        );
    }
}